<template>
  <div>
    <Modal
      v-model="visible"
      :mask-closable="false"
      width="600px"
      :title="title"
    >
      <Form :model="form" ref="dictItemForm" :rules="rules" :label-width="100">
        <FormItem label="名称"  prop="itemText">
          <Input v-model="form.itemText" placeholder="请输入名称" />
        </FormItem>
        <FormItem label="数据值"  prop="itemValue">
          <Input v-model="form.itemValue" placeholder="请输入数据值"/>
        </FormItem>
        <FormItem label="是否启用" prop="status">
          <i-switch true-color="#13ce66" false-color="#ff4949" v-model="form.status"/>
        </FormItem>
        <FormItem label="描述" prop="description">
          <Input type="textarea" v-model="form.description" :rows="4" placeholder="请输入描述" />
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button type="primary" style="margin-right: 8px" :loading="submitLoading" @click="submitForm">{{$t("submit")}}</Button>
        <Button  @click="close">{{$t("close")}}</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {saveDictItem,updateDictItem} from "@/api/dict";

export default {
  name: "DictForm",

  data(){
    return{
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      visible:false,
      title:'添加',
      submitLoading:false,
      form:{
        itemText:'',
        itemValue:'',
        description:'',
        status:true,
        dictId:'',
      },
      rules:{
        itemText: [
          {required:true,message:'请输入字典名称',trigger:'blur'},
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
        ],
        itemValue: [
          {required:true,message:'请输入字典类型',trigger:'blur'}
        ]
      }
    }
  },
  methods:{
    add(){
      this.visible=true;
    },
    edit(record){
      if(Object.keys(record).length!==0){
        this.form.id=record.id;
        this.form.dictId=record.dictId;
        this.form.itemText=record.itemText;
        this.form.itemValue=record.itemValue;
        this.form.status=record.status;
        this.form.description=record.description;
      }
      this.visible=true;
    },
    close(){
      this.visible=false;
      this.$refs.dictItemForm.resetFields();
    },
    submitForm(){
      this.$refs.dictItemForm.validate((valid)=>{
        if(valid){
          this.submitLoading=true;
          let obj;
          if(!this.form.id){
             obj=saveDictItem(this.form)
          }else{
             obj=updateDictItem(this.form)
          }
          obj.then(res=>{
            if(res.code===200){
               this.$Message.success('操作成功');
               this.submitLoading=false;
               this.$emit('ok');
            }
          }).finally(()=>{
            this.submitLoading=false;
            this.close();
          })
        }
      })
    },
  }
}
</script>

<style scoped>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
